<DOCTYPE html>
    <html lang="zh-CN">

    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link href="bootstrap3\css\bootstrap.min.css" rel="stylesheet">
        <script src="SMMC_Func.js"></script>
        <script src="bootstrap3\js\jquery-3.2.1.min.js">

        </script>
        <script src="bootstrap3\js\bootstrap.min.js">

        </script>
        <script>
         var Base64={_keyStr:"ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=",encode:function(e){var t="";var n,r,i,s,o,u,a;var f=0;e=Base64._utf8_encode(e);while(f<e.length){n=e.charCodeAt(f++);r=e.charCodeAt(f++);i=e.charCodeAt(f++);s=n>>2;o=(n&3)<<4|r>>4;u=(r&15)<<2|i>>6;a=i&63;if(isNaN(r)){u=a=64}else if(isNaN(i)){a=64}t=t+this._keyStr.charAt(s)+this._keyStr.charAt(o)+this._keyStr.charAt(u)+this._keyStr.charAt(a)}return t},decode:function(e){var t="";var n,r,i;var s,o,u,a;var f=0;e=e.replace(/[^A-Za-z0-9+/=]/g,"");while(f<e.length){s=this._keyStr.indexOf(e.charAt(f++));o=this._keyStr.indexOf(e.charAt(f++));u=this._keyStr.indexOf(e.charAt(f++));a=this._keyStr.indexOf(e.charAt(f++));n=s<<2|o>>4;r=(o&15)<<4|u>>2;i=(u&3)<<6|a;t=t+String.fromCharCode(n);if(u!=64){t=t+String.fromCharCode(r)}if(a!=64){t=t+String.fromCharCode(i)}}t=Base64._utf8_decode(t);return t},_utf8_encode:function(e){e=e.replace(/rn/g,"n");var t="";for(var n=0;n<e.length;n++){var r=e.charCodeAt(n);if(r<128){t+=String.fromCharCode(r)}else if(r>127&&r<2048){t+=String.fromCharCode(r>>6|192);t+=String.fromCharCode(r&63|128)}else{t+=String.fromCharCode(r>>12|224);t+=String.fromCharCode(r>>6&63|128);t+=String.fromCharCode(r&63|128)}}return t},_utf8_decode:function(e){var t="";var n=0;var r=c1=c2=0;while(n<e.length){r=e.charCodeAt(n);if(r<128){t+=String.fromCharCode(r);n++}else if(r>191&&r<224){c2=e.charCodeAt(n+1);t+=String.fromCharCode((r&31)<<6|c2&63);n+=2}else{c2=e.charCodeAt(n+1);c3=e.charCodeAt(n+2);t+=String.fromCharCode((r&15)<<12|(c2&63)<<6|c3&63);n+=3}}return t}}  
          $(function(){
             $(".media").click(function(){
                 var content=Base64.encode('hhh');
                 var testReplace="the"
                 testReplace="'"+testReplace.replace(/,/g,"','")+"'";
               $('#test_p').html(testReplace);
             }
             );
             $('#openview').click(function(){
                 
                var test= SMMC_rfid_viewmsg;
                test('7003');
             });
          });
        </script>
    </head>
    <div class="container-fuild">
        <div class="col-md-6">
            <h2>媒体对象</h2>
            <div class="media">
                <div class="media-left media-middle">
                    <a>
                    <img class="media-object" style="width:64px;height:64px;">
                </a>
                </div>
                <div class="media-body">
                    <h4><b>爱哭的毛毛虫--图片居中对齐</b></h4>
                    <p> 反腐败是长期的斗争，只有政府廉洁，人民才能安居乐业！</p>
                    <p>公职人员使用公权办私事是违法的!任何人都没有特权，人人都是平等的!</p>
                </div>
            </div>

            <div class="media">
                <div class="media-left media-bottom">
                    <a>
                    <img class="media-object" style="width:64px;height:64px;">
                </a>
                </div>
                <div class="media-body">
                    <h4><b>爱哭的毛毛虫1--图片底部对齐</b></h4>
                    <span id="test_p">5</span>
                    <p > 反腐败是长期的斗争，只有政府廉洁，人民才能安居乐业！</p>
                    <p>公职人员使用公权办私事是违法的!任何人都没有特权，人人都是平等的!</p>
                </div>
            </div>

            <div class="media">
                <div class="media-left">
                    <a>
                    <img class="media-object" style="width:64px;height:64px;">
                </a>
                </div>
                <div class="media-body">
                    <h4><b>爱哭的毛毛虫2--默认样式</b></h4>
                    <p> 反腐败是长期的斗争，只有政府廉洁，人民才能安居乐业！</p>
                    <p>公职人员使用公权办私事是违法的!任何人都没有特权，人人都是平等的!</p>
                </div>
            </div>

            <h2>媒体对象列表</h2>
            <ul class="media-list">
                <li class="media">
                    <div class="media-left">
                        <a href="http://baike.baidu.com/link?url=_-eUoVLGEBqMKSQZn_8FCHoyw5JiO78-bOW_ZCpy1ewdoIZmgxZ7GiuqaAsq6oHDlGafKliPalozncdICwbnsjuY1nJxjU1L1OQO387DQaqjz_Z6sdcrOfFhcBwasOne"
                            target="_blank">
                            <img src="image/xsfh.jpg" style="width:80px;height:80px;">
                            </a>
                    </div>
                    <div class="media-body">
                        <h4><b>雪山飞狐</b></h4>
                        &nbsp;&nbsp;《雪山飞狐》根据金庸同名小说改编，是香港导演王晶首次执导内地版金庸剧，内容包含《雪山飞狐》与《飞狐外传》两部作品。由聂远、朱茵、钟欣桐、安以轩等主演。 该剧讲述了明末李闯王兵败后，留下了一批价值连城的巨额宝藏，而开启宝藏的秘密被闯王手下胡苗范田四大贴身护卫分别掌握。
                        为揭开宝藏的秘密，或为利己野心，或为赈济天下灾民，江湖中以及朝廷中的各方善恶势力展开了连番争斗。
                    </div>
                </li>

                <li class="media">
                    <div class="media-left">
                        <a href="http://baike.baidu.com/link?url=qFvJOGN0-30qunfu2C54QNEZyzOgQ71conGm42qvw4c46GA2-uLv9dm9WhMmhsz_vZgZN2Bxhcd-tvJan6SF9wQAssjVET8iiDZ3zlTvi3ogGFC85_LDKvbvlwWJO7sgmcEGfgi6Ib3JwQ25Db8QFa"
                            target="_blank">
                            <img src="image/sd.jpg" style="width:80px;height:80px;">
                            </a>
                    </div>
                    <div class="media-body">
                        <h4><b>射雕英雄传</b></h4>
                        &nbsp;&nbsp;《射雕英雄传》是1957年香港《商报》出版的武侠小说，作者是金庸。 该书主要讲述了郭靖背负着家恨国仇闯入江湖，在红颜知己黄蓉的帮助下通过无数历练，最终成长为“侠之大者”的民族英雄的武林故事。
                        <div class="media">
                            <div class="media-left">
                                <a href="http://baike.baidu.com/link?url=OqYPeq2m9MRhi59-l1wkWKw-PpY1GQbkcpGvEl7P2V3754moB5KAWOlRVF7x02dGLOUlqRXuiC6DrU-1KLPVGsXe79ubUJcWDg0-YaRxEKaZe8JGfR6K2JxHRY6r_syio21kaiTNlx0NLCrSxyvRKK"
                                    target="_blank">
                            <img src="image/sd2017.jpg" style="width:80px;height:80px;">
                            </a>
                            </div>
                            <div class="media-body">
                                <h4><b>2017版射雕英雄传</b></h4>
                                &nbsp;&nbsp;2017版《射雕英雄传》是蒋家骏执导的古装武侠剧，由杨旭文、李一桐、陈星旭、孟子义等领衔主演[1-2] 。 该剧讲述了郭靖背负着家恨国仇闯入江湖，通过无数历程和在黄蓉的帮助下，最终成长成一位“侠之大者”的武林民族英雄故事[3]。
                            </div>
                        </div>
                    </div>
                </li>
            </ul>
            <ul class="list-group">
                <li class="list-group-item"><span class="badge">1</span>射雕英雄传 --带徽章</li>
                <a class="list-group-item">神雕侠侣 --链接形式</a>
                <button type="button" class="list-group-item">天龙八部 --按钮形式</button>
                <li class="list-group-item disabled">鹿鼎记 --禁用</li>
                <a class="list-group-item active">侠客行 --选中</a>
            </ul>
            <div class="row">
                <div class="col-md-6">
                    <ul class="list-group">
                        <li class="list-group-item list-group-item-success">列表形式--success</li>
                        <li class="list-group-item list-group-item-info">列表形式--info</li>
                        <li class="list-group-item list-group-item-warning">列表形式--warning</li>
                        <li class="list-group-item list-group-item-danger">列表形式--danger</li>
                    </ul>
                </div>
                <div class="col-md-6">
                    <div class="list-group">
                        <a class="list-group-item list-group-item-success">链接形式--success</a>
                        <a class="list-group-item list-group-item-info">链接形式--info</a>
                        <a class="list-group-item list-group-item-warning">链接形式--warning</a>
                        <a class="list-group-item list-group-item-danger">链接形式--danger</a>
                    </div>
                </div>
            </div>
            <h3>定制内容</h3>
            <div class="list-group">
                <a class="list-group-item active">
                    <h4>定制内容</h4>
                    <p>内容描述</p>
                </a>
                <a class="list-group-item ">
                    <h4>定制内容</h4>
                    <p>内容描述</p>
                </a>
                <a class="list-group-item ">
                    <h4>定制内容</h4>
                    <p>内容描述</p>
                </a>
            </div>
            <h3>Well</h3>
            <div class="well">默认</div>
            <div class="well well-sm">小</div>
            <div class="well well-lg">大</div>
        </div>

        <!--右边内容 !-->
        <div class="col-md-6">
            <h3>面板</h3>
            <div class="panel panel-default">
                <div id ="openview" class="panel-body">
                    基本面板
                </div>
            </div>

            <div class="panel panel-default">
                <div class="panel-heading">带标题的面板</div>
                <div class="panel-body">
                    基本面板
                </div>
                <div class="panel-footer">脚注</div>
            </div>

            <h3>情景面板</h3>
            <div class="panel panel-primary">
                <div class="panel-heading">primary</div>
                <div class="panel-body">primary-body</div>
            </div>

            <div class="panel panel-info">
                <div class="panel-heading">info</div>
                <div class="panel-body">info-body</div>
            </div>

            <div class="panel panel-success">
                <div class="panel-heading">success</div>
                <div class="panel-body">success-body</div>
            </div>

            <div class="panel panel-warning">
                <div class="panel-heading">warning</div>
                <div class="panel-body">warning-body</div>
            </div>

            <div class="panel panel-danger">
                <div class="panel-heading">danger</div>
                <div class="panel-body">danger-body</div>
            </div>
            <h3>带表格的面板</h3>
            <div class="panel panel-success">
                <div class="panel-heading">值日表</div>
                <table class="table">
                    <tr>
                        <th>星期一</th>
                        <th>星期二</th>
                        <th>星期三</th>
                        <th>星期四</th>
                        <th>星期五</th>
                        <th>星期六</th>
                        <th>星期日</th>
                    </tr>
                    <tr>
                        <td>段摇</td>
                        <td>朱蓓</td>
                        <td>王爽</td>
                        <td>连长江</td>
                        <td>高超</td>
                        <td>李依露</td>
                        <td>许勋</td>
                    </tr>
                </table>
            </div>
            <h3>列表组面板</h3>
            <div class="panel panel-primary">
                <div class="panel-heading">专业技能</div>
                <ul class="list-group">
                    <li class="list-group-item">C#</li>
                    <li class="list-group-item">Java</li>
                    <li class="list-group-item">Php</li>
                    <li class="list-group-item">SQL</li>
                    <li class="list-group-item">Swift</li>
                </ul>
            </div>
            <div class="embed-responsive embed-responsive-16by9">
                <iframe class="embed-responsive-item" src="组件2.html"></iframe>
            </div>
        </div>
    </div>

    </html>